<template>
    <div class="">
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
          <el-form-item label="卡查询" prop="card">
            <el-input v-model="queryParams.card" placeholder="卡名称\卡编号\交易单号\第三方订单号\手机号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="所属门店" prop="merchantIdList">
            <el-select v-model="queryParams.merchantIdList" placeholder="请选择" clearable multiple="" style="width: 240px">
              <el-option v-for="dict in merchantList" :key="dict.id" :label="dict.value" :value="dict.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="参与活动" prop="activeList">
            <el-select v-model="queryParams.activeList" multiple placeholder="请选择" clearable style="width: 240px" @change="changeActiveList">
              <el-option v-for="dict in activeList" :key="dict.id" :label="dict.value" :value="dict.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="渠道" prop="channelIdList">
            <el-select v-model="queryParams.channelIdList" placeholder="请选择" filterable multiple clearable style="width: 240px">
              <el-option v-for="dict in channelList" :key="dict.id" :label="dict.value" :value="dict.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="dict in statusList" :key="dict.id" :label="dict.value" :value="dict.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="订单来源" prop="orderSource">
            <el-select v-model="queryParams.orderSource" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="dict in orderSourceList" :key="dict.id" :label="dict.value" :value="dict.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker clearable v-model="date" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime"
              placeholder="选择下单时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div style="margin-bottom: 14px">
          <export-excel-button title="赚卡订单列表" type="2" action="/merchant/lucrative/equity/card/order/list/v2/export"  :params="ExportParams" />
        </div>
        <el-table v-loading="loading" :data="issueOrderList" stripe border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column type="index" label="序号" width="55" align="center" fixed />
          <el-table-column label="商品ID" align="center" prop="goodsId" :show-overflow-tooltip="true" />          
          <el-table-column label="交易单号" align="center" prop="orderNo" :show-overflow-tooltip="true" />
          <el-table-column label="第三方订单号" align="center" prop="thirdOrderNo" :show-overflow-tooltip="true" />
          <el-table-column label="赚卡名称" align="center" prop="cardName" :show-overflow-tooltip="true" />
          <el-table-column label="所属/适用门店" align="center" prop="shopName" :show-overflow-tooltip="true" />
          <el-table-column label="购买用户" align="center" prop="customerName" :show-overflow-tooltip="true" />
          <el-table-column label="联系方式" align="center" prop="phone" :show-overflow-tooltip="true" />
          <el-table-column label="交易数量" align="center" prop="buyAmount" :show-overflow-tooltip="true" />
          <el-table-column label="交易金额" align="center" prop="orderMoney" :show-overflow-tooltip="true" />
          <el-table-column label="积分抵扣" align="center" prop="deductibleIntegral" :show-overflow-tooltip="true" />
          <el-table-column label="实付金额" align="center" prop="payMoney" :show-overflow-tooltip="true" />
          <el-table-column label="订单状态" align="center" prop="transactionMethod" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <dict-tag :options="statusList" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="渠道" align="center" prop="channel" :show-overflow-tooltip="true" />
          <el-table-column label="订单来源" align="center" prop="transactionMethod" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <dict-tag :options="orderSourceList" :value="scope.row.orderSource" />
            </template>
          </el-table-column>
          <el-table-column label="交易时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </div>
  
  
      <Dialog ref="dialog" @refresh="getList"></Dialog>
    </div>
  </template>
  
  <script>
    import {
      issuerSelectList,
    } from "@/api/equityManager/equityCard";
    import {
      shopSelect,
      issueOrderList,
    } from "@/api/merchantsNFR/nfrIssue";
    import {
      orderListv2,
      channelSelect
    } from "@/api/merchantsNFR/yeCard";
    import {
      adminDict,
      listEquityCardBill,
      delEquityCardBill,
      exportEquityCardBill,
    } from "@/api/equityCardBill";
    import Dialog from "@/views/moneyManagement/equityCardBill/dialog";
    import ExportExcelButton from "@/components/ExportExcelButton/index";
  
    export default {
      name: "EquityCardBill",
      // dicts: ['equity_card_bill_type'],
      components: {
        ExportExcelButton,
        Dialog
      },
      props: {
        settleNo: String, //结算单号
      },
      data() {
        return {
          // 遮罩层
          loading: false,
          // 导出遮罩层
          exportLoading: false,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 数字权益卡购卡账单查询表格数据
          issueOrderList: [],
          // 查询参数
          queryParams: {
            assistanceStatus: '',//同行助力激励状态 1 开启 2 关闭
            card: '', //卡名称/卡编号
            startDate: '',
            endDate: '',
            exportIdList: [],//导出id列表
            incentiveStatus: '', //	消费后激励活动 1 开启 2 关闭
            merchantIdList: [], //		店铺商家id集合
            pageNum: 1,
            pageSize: 10,
            status: '', //订单状态 字典 customer_order_status
            orderSource:'', //订单来源 
            channelIdList: [],//渠道id列表
            activeList: [],
          },
          activeList: [
            {id: 1,value: '消费激励'},
            {id: 2,value: '同行助力'},
          ],
          date: [],
          statusList: [],
          orderSourceList: [],
          issuerSelectList: [],
          merchantList: [],
          channelList: [],
        };
      },
      computed: {
        ExportParams() {
          const params = {
            ...this.queryParams,
          };
          return params;
        },
      },
      created() {
        this.getlinkagelist()
        this.getMerchantList()
        this.getChannelSelect() 
        this.getShop()
        if (this.settleNo != undefined && this.settleNo != '') {
          this.queryParams.settlementNo = this.settleNo
        }
        var query = this.$route.query.name
        if (query) {
          this.queryParams.query = query
        }
        this.getList();
      },
  
      methods: {
        //获取店铺下拉
        getShop() {
          shopSelect().then(res => {
            this.merchantList = res.result
          })
        },
        getChannelSelect() {
          channelSelect().then(res => {
            this.channelList = res.result
          })
        },
        //获取发行方列表
        getMerchantList() {
          let data = {}
          issuerSelectList(data).then(res => {
            this.issuerSelectList = res.result
          }).catch(() => {
  
          });
          // .finally(() => {
  
          // });
        },
        getlinkagelist() {
          //获取商户类型字典
          const params = {
            dictType: "merchant_equity_card_order_status,customer_equity_card_order_source",
          };
          adminDict(params).then((res) => {
            this.statusList = res.result[0].dictList;
            this.orderSourceList = res.result[1].dictList;
          });
        },
        /** 查询数字权益卡购卡账单查询列表 */
        getList() {
          this.loading = true;
          this.queryParams.exportIdList = []
          orderListv2(this.queryParams).then(response => {
            response.result.records.forEach(item => {
              for (var key in item) {
                if (!item[key]) {
                  item[key] = "-";
                }
              }
            });
          this.issueOrderList = response.result.records;
            this.total = response.result.total;
            this.loading = false;
          });
        },
        //处理参与活动
        changeActiveList(e){
          this.queryParams.incentiveStatus = 2
          this.queryParams.assistanceStatus = 2
          console.log('e',e)
          var list = e
          list.forEach(item => {
            if(item == 1){
              this.queryParams.incentiveStatus = 1
            }else if(item == 2){
              this.queryParams.assistanceStatus = 1
            }
          })
        },
        // 表单重置
        reset() {
          this.queryParams = {
            assistanceStatus: '',//同行助力激励状态 1 开启 2 关闭
            card: '', //卡名称/卡编号
            startDate: '',
            endDate: '',
            exportIdList: [],//导出id列表
            incentiveStatus: '', //	消费后激励活动 1 开启 2 关闭
            merchantIdList: [], //		店铺商家id集合
            pageNum: 1,
            pageSize: 10,
            status: '', //订单状态 字典 customer_order_status
            channelIdList: [],//渠道id列表
            activeList: [],
          };
          this.date = []
        },
        changeTime(time) {
          if (!time) {
            this.date = []
            this.queryParams.startDate = ''
            this.queryParams.endDate = ''
          } else {
            this.queryParams.startDate = this.date[0]
            this.queryParams.endDate = this.date[1]
          }
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.reset()
          this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.queryParams.exportIdList = selection.map(item => item.id)
          console.log('this.exportIdList',this.queryParams.exportIdList)
          console.log('this.queryParams',this.queryParams)
        },
        /** 新增按钮操作 */
        handleAdd() {
          this.$refs.dialog.open();
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
          this.$refs.dialog.open(row.id);
        },
        /** 详情按钮操作 */
        handleView(row) {
          this.$refs.dialog.open(row.id, true);
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          const ids = row.id || this.ids;
          this.$modal.confirm('是否确认删除？').then(() => {
            this.loading = true;
            return delEquityCardBill(ids);
          }).then(() => {
            this.loading = false;
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).finally(() => {
            this.loading = false;
          });
        },
        /** 导出按钮操作 */
        handleExport() {
          const queryParams = this.queryParams;
          this.$modal.confirm('是否确认导出所有数字权益卡购卡账单查询数据项？').then(() => {
            this.exportLoading = true;
            return exportEquityCardBill(queryParams);
          }).then(response => {
            this.$download.name(response.msg);
            this.exportLoading = false;
          }).catch(() => {});
        }
      }
    };
  
  </script>
  <style lang="scss" scoped>
    .head {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;
    }
  
    .listBox {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      //   height: 120px;
      padding: 20px 20px;
      margin-top: 10px;
    }
  
    .el-input {
      width: 390px;
    }
  
  </style>
  